async function fetchData() {
  try {
    const response = await fetch("https://randomuser.me/api?results=50");
    const data = await response.json();
    console.log(data.results);
    return data.results;
  } catch (error) {
    console.error("Error:", error);
  }
}
let result = [];
let lis = [];
let line = document.querySelector(".line");
let img = document.querySelector("img");
let nameDiv = document.querySelector(".name");
let i = 0;
let idx = 0;

async function init() {
  result = await fetchData();
  let name = result[idx].name.first + " " + result[idx].name.last;
  let imgUrl = result[idx].picture.large;
  img.src = imgUrl;
  nameDiv.textContent = name;
  idx++;
  let interval = setInterval(() => {
    line.style.width = i + "%";
    i += 0.1;
    if (Math.abs(i - 100) < 0.1) {
      i = 0;
      name = result[idx].name.first + " " + result[idx].name.last;
      imgUrl = result[idx].picture.large;
      idx++;
      img.src = imgUrl;
      nameDiv.textContent = name;
    }
  }, 10);
}

init();
